<template>
  <!-- 审批节点组件 -->
  <div class="audit">
    <div class="audit_steps">
      <div v-for="(item, index) in step" :key="index" class="audit_steps_list">
        <div @click.stop="stepclick(item.sevent, item.id)">
          <span v-if="item.icon === '+'" class="audit_steps_list_box">
            <span class="audit_steps_list_box_item">{{ item.icon }}</span>
          </span>
          <span v-else class="audit_steps_list_box">
            <span class="audit_steps_list_box_tips">
              <span v-html="$options.filters.ellipsis(item.content)" />
              <span class="cancel" @click.stop="delitem(item.id)">X</span>
            </span>
            <span
              class="audit_steps_list_box_item"
              :class="{ itemactive: current == item.id }"
            >{{ index + 1 }}</span>
          </span>
          <span
            v-if="item.span"
            class="audit_steps_list_line"
            :class="current >= index + 1 ? 'lineActive' : ''"
          />
        </div>
      </div>
    </div>
    <div v-if="step.length > 1" class="audit_form">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="节点名称:">
          <el-input
            v-model="ruleForm.nodeName"
            placeholder="请输入节点名称"
            style="width: 300px"
            @change="handlerNodename"
          />
        </el-form-item>
        <el-form-item label="审批人:">
          <el-radio-group :key="approverKey" v-model="ruleForm.approver">
            <el-tooltip
              v-for="item in radiogroup"
              :key="item.value"
              ss
              class="item"
              effect="dark"
              :content="item.content"
              placement="top-end"
            >
              <el-radio
                :value="item.value"
                :label="item.value"
                @click.native.prevent="changeApprover(item.value)"
              >
                {{ item.label }}
              </el-radio>
            </el-tooltip>
          </el-radio-group>

          <el-form-item
            v-if="ruleForm.approver === 0&&ruleForm.approvedby!==''"
            label-width="0px"
            class="item"
          >
            <el-input
              v-model="ruleForm.approvedby"
              placeholder="选成员"
              type="button"
              style="width: 300px;vertical-align: middle;"
              @click.native="popUpClick(1)"
            >
              <i slot="suffix" style="font-size: 18px;" class="el-icon-edit-outline" />
            </el-input>
            <el-button type="danger" round size="mini" style="margin-left: 20px;" @click.native="deleteEach(1)">删除
            </el-button>
          </el-form-item>

          <el-form-item v-if="ruleForm.approver === 1 &&ruleForm.approvalRole!==''" label-width="0px" class="item">
            <el-input
              v-model="ruleForm.approvalRole"
              type="button"
              placeholder="选角色"
              style="width: 300px;vertical-align: middle;"
              @click.native="popUpClick(0)"
            >
              <i slot="suffix" style="font-size: 18px;" class="el-icon-edit-outline" />
            </el-input>
            <el-button type="danger" round size="mini" style="margin-left: 20px;" @click.native="deleteEach(0)">删除
            </el-button>
          </el-form-item>
          <div>
            <el-button v-if="ruleForm.approver === 1" icon="el-icon-plus" size="small" type="primary" @click.native="popUpClick(0)">选角色</el-button>
            <el-button v-if="ruleForm.approver === 0" icon="el-icon-plus" size="small" type="primary" @click.native="popUpClick(1)">选人员</el-button>
          </div>

        </el-form-item>

        <!-- <el-form-item label="审批多人时:">
          <el-radio-group :key="typeKey" v-model="ruleForm.approvalType">
            <el-radio
              v-for="item in typegroup"
              :key="item.value"
              :value="item.value"
              :label="item.value"
              @click.native.prevent="changeType(item.value)"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item> -->

        <el-form-item label="是否必填审批意见">
          <el-radio-group
            :key="approvalKey"
            v-model="ruleForm.isEnableOpinion"
          >
            <el-radio
              v-for="item in commentsgroup"
              :key="item.value"
              :value="item.value"
              :label="item.value"
              @click.native.prevent="changeComments(item.value)"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <!-- 考核角色 -->
    <pop
      :poshow="popUpObj[popUpIndex].show"
      :type="popUpObj[popUpIndex].type"
      :title="popUpObj[popUpIndex].potitle"
      :echo="popUpObj[popUpIndex].commitArray"
      :index="popUpIndex"
      @handleClose="handleClose"
      @handleDetermine="handleDetermine"
    />
  </div>
</template>

<script>

import pop from '../components/pop.vue'
export default {
  components: {
    pop
  },
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 15) {
        return value.slice(0, 15) + '...'
      }
      return value
    }
  },
  props: {
    active: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      currentIndex: 0,
      approvalKey: false,
      typeKey: false,
      approverKey: false,
      current: 1, // 此刻id
      step: [],
      ruleForm: {
        nodeName: '', // 节点名称
        approver: null, // 审批单选
        approvedby: '', // 审批人,
        approvalRole: '', // 角色
        // approvalType: null, // 审核类型
        isEnableOpinion: null, // 审批意见
        commitArray: []
      },
      popUpObj: [
        {
          show: false,
          type: '7',
          potitle: '选角色',
          commitArray: []
        },
        {
          show: false,
          type: '8',
          potitle: '选人员',
          commitArray: []
        }
      ],
      // 审核人
      radiogroup: [
        {
          value: 0,
          label: '指定成员',
          content: '当审批人设置为“指定成员”时,默认不启用组织架构限制.'
        },
        {
          value: 1,
          label: '角色',
          content: '当审批人设置为“角色”时,将根据发起人的组织架构进行限制.'
        }
      ],
      // 审批类型
      typegroup: [
        {
          value: 0,
          label: '任一人审批'
        }
      ],
      // 审批意见
      commentsgroup: [
        {
          value: 1,
          label: '审批意见'
        }
      ],
      popUpIndex: 0 // 点击的
    }
  },
  computed: {},
  watch: {
    active(newval) {
      if (newval === 1) {
        this.$nextTick(function() {
          if (JSON.parse(localStorage.getItem('setAuditnode'))) {
            const Auditnode = JSON.parse(localStorage.getItem('setAuditnode'))
            Auditnode.map((item, index) => {
              if (item.id === 0) {
                Auditnode.splice(index, 1)
              }
            })

            Auditnode.sort((a, b) => {
              return a.id - b.id
            })
            Auditnode.push({
              id: 0,
              icon: '+',
              sevent: 'addstep',
              content: '添加新节点</br>'
            })

            this.step = Auditnode
            Auditnode.map((item) => {
              if (this.current === item.id) {
                Object.keys(this.ruleForm).forEach((key) => {
                  this.ruleForm[key] = item[key]
                })
                if (this.ruleForm.approver === 0) {
                  this.popUpObj[this.popUpIndex].commitArray = item.commitArray
                } else if (this.ruleForm.approver === 1) {
                  this.popUpObj[this.popUpIndex].commitArray = item.commitArray
                }
              }
            })
            this.step.forEach((item, index, step) => {
              if (index === 0) {
                return
              } else {
                this.stepclick('lookstep', this.step[index - 1].id)
              }
            })
            if (this.step.length === 1 && this.step[0].sevent === 'addstep') {
              this.stepclick('addstep')
            }
          }
          this.$forceUpdate()
        })
      }
    },
    'ruleForm.approvalRole'(newval) {
      if (newval) {
        this.$nextTick(function() {
          if (JSON.parse(localStorage.getItem('setAuditnode'))) {
            const Auditnode = JSON.parse(localStorage.getItem('setAuditnode'))
            Auditnode.map((item, index) => {
              if (item.id === 0) {
                Auditnode.splice(index, 1)
              }
            })

            Auditnode.sort((a, b) => {
              return a.id - b.id
            })
            Auditnode.push({
              id: 0,
              icon: '+',
              sevent: 'addstep',
              content: '添加新节点</br>'
            })

            this.step = Auditnode
            Auditnode.map((item) => {
              if (this.current === item.id) {
                Object.keys(this.ruleForm).forEach((key) => {
                  this.ruleForm[key] = item[key]
                })
                if (this.ruleForm.approver === 0) {
                  this.popUpObj[this.popUpIndex].commitArray = item.commitArray
                } else if (this.ruleForm.approver === 1) {
                  this.popUpObj[this.popUpIndex].commitArray = item.commitArray
                }
              }
            })
          }
          this.$forceUpdate()
        })
      }
    },
    'ruleForm.approvedby'(newval) {
      if (newval) {
        this.$nextTick(function() {
          if (JSON.parse(localStorage.getItem('setAuditnode'))) {
            const Auditnode = JSON.parse(localStorage.getItem('setAuditnode'))
            Auditnode.map((item, index) => {
              if (item.id === 0) {
                Auditnode.splice(index, 1)
              }
            })

            Auditnode.sort((a, b) => {
              return a.id - b.id
            })
            Auditnode.push({
              id: 0,
              icon: '+',
              sevent: 'addstep',
              content: '添加新节点</br>'
            })

            this.step = Auditnode
            Auditnode.map((item) => {
              if (this.current === item.id) {
                Object.keys(this.ruleForm).forEach((key) => {
                  this.ruleForm[key] = item[key]
                })
                if (this.ruleForm.approver === 0) {
                  this.popUpObj[this.popUpIndex].commitArray = item.commitArray
                } else if (this.ruleForm.approver === 1) {
                  this.popUpObj[this.popUpIndex].commitArray = item.commitArray
                }
              }
            })
          }
          this.$forceUpdate()
        })
      }
    },
    'ruleForm.approver'(newval) {
      this.$nextTick(function() {
        if (JSON.parse(localStorage.getItem('setAuditnode'))) {
          const Auditnode = JSON.parse(localStorage.getItem('setAuditnode'))
          Auditnode.map((item, index) => {
            if (item.id === 0) {
              Auditnode.splice(index, 1)
            }
          })

          Auditnode.sort((a, b) => {
            return a.id - b.id
          })
          Auditnode.push({
            id: 0,
            icon: '+',
            sevent: 'addstep',
            content: '添加新节点</br>'
          })

          this.step = Auditnode
          Auditnode.map((item) => {
            if (this.current === item.id) {
              Object.keys(this.ruleForm).forEach((key) => {
                this.ruleForm[key] = item[key]
              })
              if (this.ruleForm.approver === 0) {
                this.popUpObj[this.popUpIndex].commitArray = item.commitArray
              } else if (this.ruleForm.approver === 1) {
                this.popUpObj[this.popUpIndex].commitArray = item.commitArray
              }
            }
          })
        }
        this.$forceUpdate()
      })
    }
  },
  created() {

  },
  methods: {
    // 删除
    deleteEach(idx) {
      if (idx === 0) {
        this.ruleForm.approvalRole = ''
      } else if (idx === 1) {
        this.ruleForm.approvedby = ''
      }
      this.popUpObj[idx].commitArray = []

      this.$nextTick(() => {
        const Auditnode = JSON.parse(localStorage.getItem('setAuditnode'))
        Auditnode.map((item, index) => {
          if (item.id === this.current) {
            if (this.popUpIndex === 0) {
              item.approvalRole = ''
              item.approvedby = ''
              item.content = `指定角色为</br>未指定角色`
            } else if (this.popUpIndex === 1) {
              item.approvedby = ''
              item.approvalRole = ''
              item.content = `指定成员</br>未指定成员`
            }
            item.commitArray = this.popUpObj[idx].commitArray
          }
        })

        localStorage.setItem('setAuditnode', JSON.stringify(Auditnode))
        this.$forceUpdate()
      })
    },
    // 字符串
    setContent(str) {
      if (str.length >= 12) {
        str = str.slice(0, 12) + '...'
        return str
      }
    },
    // 节点名称改变
    handlerNodename(val) {
      const Auditnode = JSON.parse(localStorage.getItem('setAuditnode'))
      Auditnode.map((item, index) => {
        if (item.id === this.current) {
          item.nodeName = val
        }
      })

      localStorage.setItem('setAuditnode', JSON.stringify(Auditnode))
    },
    // 审批人单选改变
    changeApprover(val) {
      this.ruleForm.approver = this.ruleForm.approver === val ? null : val
      this.approverKey = !this.approverKey
      this.$nextTick(() => {
        const Auditnode = JSON.parse(localStorage.getItem('setAuditnode'))
        Auditnode.map((item, index) => {
          if (item.id === this.current) {
            item.approver = this.ruleForm.approver
            item.commitArray = []
            item.approvalRole = ''
            item.approvedby = ''
            item.content = `指定成员</br>未指定成员`
            this.ruleForm.approvalRole = ''
            this.ruleForm.approvedby = ''
          }
        })

        localStorage.setItem('setAuditnode', JSON.stringify(Auditnode))
        this.$forceUpdate()
      })
    },
    // 审批类型改变
    changeType(val) {
      this.ruleForm.approvalType = this.ruleForm.approvalType === val ? null : val
      this.typeKey = !this.typeKey
      this.$nextTick(() => {
        const Auditnode = JSON.parse(localStorage.getItem('setAuditnode'))
        Auditnode.map((item, index) => {
          if (item.id === this.current) {
            item.approvalType = this.ruleForm.approvalType
          }
        })
        localStorage.setItem('setAuditnode', JSON.stringify(Auditnode))
        this.$forceUpdate()
      })
    },
    // 必填改变选项
    changeComments(val) {
      this.ruleForm.isEnableOpinion = this.ruleForm.isEnableOpinion === val ? 0 : val
      this.approvalKey = !this.approvalKey
      this.$nextTick(() => {
        const Auditnode = JSON.parse(localStorage.getItem('setAuditnode'))
        Auditnode.map((item, index) => {
          if (item.id === this.current) {
            item.isEnableOpinion = this.ruleForm.isEnableOpinion
          }
        })
        localStorage.setItem('setAuditnode', JSON.stringify(Auditnode))
        this.$forceUpdate()
      })
    },
    // 选人员角色弹窗
    popUpClick(index) {
      this.popUpIndex = index
      const Auditnode = JSON.parse(localStorage.getItem('setAuditnode'))
      Auditnode.map((item, index) => {
        if (item.id === this.current) {
          this.popUpObj[this.popUpIndex].commitArray = item.commitArray
        }
      })

      this.popUpObj[this.popUpIndex].show = true
    },
    // 关闭弹窗
    handleClose(index) {
      this.popUpObj[index].show = false
    },
    // 弹窗确定
    handleDetermine(str, newarr, index) {
      if (index === 0) {
        this.ruleForm.approvalRole = str
        this.ruleForm.approvedby = ''
        this.popUpObj[1].commitArray = []
      } else if (index === 1) {
        this.ruleForm.approvedby = str
        this.ruleForm.approvalRole = ''
        this.popUpObj[0].commitArray = []
      }
      this.popUpObj[index].show = false
      this.popUpObj[index].commitArray = newarr
      this.$nextTick(() => {
        const Auditnode = JSON.parse(localStorage.getItem('setAuditnode'))
        Auditnode.map((item, index) => {
          if (item.id === this.current) {
            if (this.popUpIndex === 0) {
              item.approvalRole = str
              item.approvedby = ''
              item.content = `指定角色为</br>${str}`
            } else if (this.popUpIndex === 1) {
              item.approvedby = str
              item.approvalRole = ''
              item.content = `指定成员为</br>${str}`
            }
            item.commitArray = newarr
          }
        })

        localStorage.setItem('setAuditnode', JSON.stringify(Auditnode))
        this.$forceUpdate()
      })
    },
    // 删除节点
    delitem(id) {
      const index = this.step.findIndex((ele) => {
        return ele.id === id
      })

      if (index === -1) {
        return console.log('删除失败')
      } else {
        this.$nextTick(function() {
          this.step.map((item, i) => {
            if (index === 0) {
              return
            } else {
              this.stepclick('lookstep', this.step[index - 1].id)
            }
          })
          this.$delete(this.step, index)

          this.step.map((it, idx) => {
            if (it.id > id) {
              it.id = it.id - 1
            }
          })
          const Auditnode = JSON.parse(localStorage.getItem('setAuditnode'))
          Auditnode.map((item, index) => {
            if (item.id === id) {
              Auditnode.splice(index, 1)
            }
          })

          localStorage.setItem('setAuditnode', JSON.stringify(Auditnode))

          this.$forceUpdate()
        })
      }
    },
    // 添加新的节点
    stepclick(sevent, id) {
      this.current = id
      if (sevent === 'addstep') {
        const newobj = {
          id: this.step.length,
          sevent: 'lookstep',
          content: `指定成员</br>未指定成员`,
          span: true,
          nodeName: '', // 节点名称
          approver: null, // 审批单选
          approvedby: '', // 审批人,
          approvalRole: '', // 角色
          // approvalType: null, // 审核类型
          isEnableOpinion: null, // 审批意见
          commitArray: [] // 选人员或者觉得的type
        }
        if (this.step.length === 1) {
          this.$nextTick(function() {
            this.step.unshift(newobj)
            this.$forceUpdate()
          })
        } else {
          if (this.step.length >= 2) {
            this.$nextTick(function() {
              this.step.splice(length - 1, 0, newobj)
              this.$forceUpdate()
            })
          } else {
            this.$nextTick(function() {
              this.step.splice(length - 2, 0, newobj)
              this.$forceUpdate()
            })
          }
        }
        const Auditnode = JSON.parse(localStorage.getItem('setAuditnode'))
        Auditnode.push(newobj)
        localStorage.setItem('setAuditnode', JSON.stringify(Auditnode))
        this.stepclick('lookstep', this.step.length)
      } else {
        const Auditnode = JSON.parse(localStorage.getItem('setAuditnode'))
        Auditnode.map((item) => {
          if (this.current === item.id) {
            Object.keys(this.ruleForm).forEach((key) => {
              this.ruleForm[key] = item[key]
            })
          }
        })
        this.$forceUpdate()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.audit {
  &_steps {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    &_list {
      margin-bottom: 80px;
      &_box {
        position: relative;
        &_tips {
          width: 120px;
          height: 60px;
          padding: 15px;
          box-sizing: border-box;
          border-radius: 4px;
          color: #333;
          position: absolute;
          top: -80px;
          left: 50%;
          margin-left: -60px;
          text-align: center;
          font-size: 14px;
          .cancel {
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 12px;
            font-weight: 600;
          }
        }
        &_tips:hover {
          box-shadow: 0px 1px 3px rgba(214, 228, 255, 0.06);
          background: #d6e4ff;
          color: #2d8dfc;
        }

        &_item {
          display: inline-block;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 1px solid #666;
          color: #666;
          font-size: 16px;
          box-sizing: border-box;
          text-align: center;
          line-height: 40px;
        }
        .itemactive {
          background: #fff;
          color: #3d8eff;
          border: 1px solid #3d8eff;
          font-size: 18px;
          font-weight: 600;
        }
      }

      &_line {
        display: inline-block;
        border: 1px #666 dashed;
        width: 100px;
        margin-left: 25px;
        margin-right: 25px;
      }
    }
    &_list ::after {
      content: "";
      flex: auto;
    }
    .lineActive {
      border: 1px #000 dashed;
    }
  }
}
</style>
